<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../第四周考试题/购物车.css">
</head>
<body>
    <div class="from">
        <div class="left">
    <ul class="leftList">
        <li><img src="../img/1.png" alt=""><a href="#" onclick="showProducts('right')"></a>迷你蛋糕</li>
        <li><img src="../img/2.png" alt=""><a href="#" onclick="showProducts('right')"></a>迷你蛋糕</li>
        <li><img src="../img/2.png" alt=""><a href="#" onclick="showProducts('right')"></a>冰淇淋</li>
        <li><img src="../img/2.png" alt=""><a href="#" onclick="showProducts('right')"></a>半糖系列</li>
        <li><img src="../img/2.png" alt=""><a href="#" onclick="showProducts('right')"></a>牧场醇乳</li>
        <li><img src="../img/2.png" alt=""><a href="#" onclick="showProducts('right')"></a>私人订制</li>
        <li><img src="../img/2.png" alt=""><a href="#" onclick="showProducts('right')"></a>世界名品</li>
        <li><img src="../img/2.png" alt=""><a href="#" onclick="showProducts('right')"></a>寿庆系列</li>
    </ul>
        </div>
       <div class="right">
        <a href="./草莓便当盒子.html"><img src="https://img0.baidu.com/it/u=629267872,3308839115&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=629" alt="" class="image"></a>
       </div>
       <div class="abbr">
        <span>草莓便当盒子</span>
        <p>蛋糕胚，稀奶油，草莓，马蹄珠</p>
        <p class="photograp"><img src="../img/3.png" alt=""></p>
        <span class="text">￥14.80/个 </span>
        <span class="one"><del>￥16.8</del></span>
        <p class="smear"><img src="../img/4.png" alt=""></p>
       </div>
       <div class="right">
        <a href="./开心果.html"><img src="../第四周考试题/微信图片_20240412193749.jpg" alt=""></a>
       </div>
       <div class="abbr">
        <span>开心果便当盒子</span>
        <p>蛋糕胚、稀奶油、开心果酱、海盐脆脆、青提、马蹄珠</p>
        <p class="photograp"><img src="../img/3.png" alt=""></p>
        <span class="text">￥14.80/个</span>
        <span class="one"><del>￥16.8</del></span>
        <p class="smear"><img src="../img/4.png" alt=""></p>
       </div>
       <div class="right">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Ff195ee66-decd-cf54-9a09-ce19a60a251b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1715510409&t=6bad7074987dffc15e49343bf4e121dc" alt="">
       </div>
       <div class="abbr">
        <span>芒果便当盒子</span>
        <p>蛋糕胚、稀奶油、芒果、马蹄珠</p>
        <p class="photograp"><img src="../img/3.png" alt=""></p>
        <span class="text">￥14.80/个</span>
        <span class="one"><del>￥16.8</del></span>
        <p class="smear"><img src="../img/4.png" alt=""></p>
       </div>
    </div>
    <script>
          function showProducts(leftList) {
        // 获取所有商品
        var products = document.getElementsByClassName('abbr');
        
        // 隐藏所有商品
        for (var i = 0; i < products.length; i++) {
            products[i].style.display = 'none';
        }
        
        // 显示商品项
        var selectedProducts = document.getElementsByClassName(leftList);
        for (var j = 0; j < selectedProducts.length; j++) {
            selectedProducts[j].style.display = 'block';
        }
    }

    </script>
</body>
</html>